<script setup>
import { computed, toRefs } from 'vue'

// defineProps + defineEmits 用于 Vue 3 SFC <script setup>
const props = defineProps({
  images: {
    type: Array,
    default: () => [],
  },
  maxCount: {
    type: Number,
    default: 9,
  },
})

const { images, maxCount } = toRefs(props)

const displayImages = computed(() => {
  return images.value.slice(0, maxCount.value)
})

const showOverlay = computed(() => {
  return images.value.length > maxCount.value
})

function preview(index) {
  uni.previewImage({
    urls: images.value,
    current: index,
  })
}
</script>

<template>
  <view class="flex flex-wrap gap-2">
    <view
      v-for="(item, index) in displayImages"
      :key="index"
      class="relative aspect-square w-[30.3%] overflow-hidden rounded-md"
      @tap="preview(index)"
    >
      <image
        :src="item"
        mode="aspectFill"
        class="h-full w-full"
      />
      <!-- 遮罩 +N -->
      <view
        v-if="showOverlay && index === maxCount - 1"
        class="absolute left-0 top-0 h-full w-full flex items-center justify-center bg-black/50"
      >
        <text class="text-lg text-white font-bold">+{{ images.length - maxCount }}</text>
      </view>
    </view>
  </view>
</template>
